<template>
  <nav class="bf-nav-container">
    <el-button class="bf-icon  bf-nav-ctrol"
               :class="{'gw-bars-collapse':!isCollapse,'gw-bars':isCollapse}"
               size="mini"
               @click="isCollapse=!isCollapse">
    </el-button>
    <el-menu default-active="test"
             class="el-menu-vertical"
             @open="handleOpen"
             @close="handleClose"
             @select="handleSelect"
             :collapse="isCollapse"
             background-color="#4a5064"
             text-color="#fff">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">导航一</span>
        </template>
        <el-menu-item index="test">dataTable</el-menu-item>
        <el-menu-item index="bfTable">bfTable</el-menu-item>
        <el-menu-item index="1-3">选项3</el-menu-item>
        <el-menu-item index="1-4">选项4</el-menu-item>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </nav>
</template>

<script lang="ts">
  import {Vue, Component, Watch, Emit} from 'vue-property-decorator'

  @Component
  export default class bfNav extends Vue {
    // data
    isCollapse: boolean = false;

    handleOpen(key, keyPath) {
      console.log("handleOpen", key, keyPath);
    }

    handleClose(key, keyPath) {
      console.log("handleClose", key, keyPath);
    }

    handleSelect(key, keyPath) {
      console.log("handleSelect", key, keyPath);
      this.activeIndex(key, keyPath);

    }

    @Watch('isCollapse')
    w_isCollapse(val) {
      this.collapse(val);
    }

    @Emit('collapse')
    collapse(bool: boolean) {
    }

    @Emit("activeIndex")
    activeIndex(key: string, keyPath: string) {
    }

  }

</script>

<style lang="scss">
  @import "../scss/glob";

  .el-menu-item, .el-submenu__title {
    height: 40px !important;
    line-height: 40px !important;
  }

  .bf-nav-container {
    .bf-nav-ctrol, .bf-nav-ctrol:hover, .bf-nav-ctrol:active, .bf-nav-ctrol:focus {
      @include noborder;
      width: 100%;
      background: #4a5064;
      color: #fff;
    }

    .el-menu-vertical:not(.el-menu--collapse) {
      width: 180px;
    }

    .el-menu {
      @include noborder;
      .el-menu-item, .el-submenu__title, .el-tooltip {
        padding-left: 13px !important;
      }
      .el-menu-item:hover i, .el-submenu__title:hover i {
        color: #fff;
      }
    }
    .el-menu--inline {
      .el-menu-item {
        padding-left: 40px !important;
      }

    }

    .el-menu--collapse {
      width: 50px;
    }
  }
</style>
